<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 这里是input关键字搜索框和两个按钮啦 -->
        <el-form :inline="true"  class="demo-form-inline">
          <el-form-item label="关键字">
            <el-input
              v-model="keyword"
              placeholder="根据编号搜索"
              style="width: 250px"
            ></el-input>
          </el-form-item>
          <el-form-item class="filter-item fr">
            <el-button plain @click="del" size="small" icon="el-icon-close"
              >清除</el-button
            >
            <el-button
              type="primary"
              @click="onSubmit"
              icon="el-icon-search"
              size="small"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 这里是灰灰的数据总数 -->
        <el-alert :title="title" type="info" :closable="false" show-icon>
        </el-alert>
        <!-- 这里开始是表格啦 -->
        <el-table :data="list" stripe>
          <el-table-column label="编号" width="250" prop="id">
            <!-- <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template> -->
          </el-table-column>
          <el-table-column
            label="题型"
            prop="questionType"
            :formatter="formatter"
          >
            <!-- <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template> -->
          </el-table-column>
          <el-table-column label="题目编号" prop="questionIDs" width="200">
            <template #default="{ row }">
              <div
                @click="questionsCli(row,item)"
                v-for="item in row.questionIDs"
                :key="item.number"
                class="questions"
              >
                {{ item.number }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="录入时间"
            prop="addTime"
            width="180"
          ></el-table-column>
          <el-table-column
            label="答题时间(s)"
            prop="totalSeconds"
          ></el-table-column>
          <el-table-column
            label="正确率(%)"
            prop="accuracyRate"
          ></el-table-column>
          <el-table-column label="录入人" prop="userName"></el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                @click.native="QuesDelete(row)"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 这里是最后的分页喽 -->
        <el-pagination
          class="pag-fr"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="total"
          :page-sizes="[20, 30, 50, 100]"
          background
          v-if="total > 20"
        >
        </el-pagination>
        <!-- 这里就没有了，基本框架结束  -->
      </el-card>
      <!-- 这里是预览框插件 -->
      <PreviewDialog
        :showPreview.sync="showPreview"
        :previewRowData.sync="previewRowData"
        :reduceTagQuestion="reduceTagQuestion"
        :reduceTagAnswer="reduceTagAnswer"
      ></PreviewDialog>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import PreviewDialog from '../components/questions-preview.vue'

export default {
  data () {
    return {
      keyword: '',
      page: 1,
      pagesize: 20,
      list: [],
      total: 0,
      showPreview: false, // 预览的dialog的显现与否
      previewRowData: {},
      reduceTagQuestion: '', // 传过去的dialog题干
      reduceTagAnswer: '' // 传过去的dialog解析
    }
  },
  created () {
    this.getQuestionList()
  },
  // 显示顶部灰色条条数据总数
  computed: {
    title () {
      return `数据一共${this.total}条`
    }
  },
  components: {
    PreviewDialog
  },
  methods: {
    // 清除数据框内容
    del () {
      this.keyword = ''
      this.getQuestionList()
    },
    // 查询
    onSubmit () {
      this.page = 1
      this.getQuestionList()
    },
    // handleDelete (index, row) {
    //   console.log(index, row)
    // },
    // size 发送变化触发的方法
    handleSizeChange (val) {
      this.pagesize = val
      this.page = 1
      this.getQuestionList()
    },
    // 页码发生变化触发的方法
    handleCurrentChange (val) {
      this.page = val
      console.log(this.page)
      this.getQuestionList()
    },
    // 获取列表
    async getQuestionList () {
      const {
        data: { counts, items }
      } = await randoms({
        page: this.page,
        pagesize: this.pagesize,
        keyword: this.keyword
      })
      // console.log(data)
      // console.log(counts, items)
      this.total = counts
      this.list = items
      // console.log(items)
      // console.log(this.list)
    },
    turnChoose (row) {
      // console.log(row)
      if (Number(row.questionType) === 1) {
        return '单选'
      } else if (Number(row.questionType) === 2) {
        return '多选'
      } else {
        return '简答'
      }
    },
    difficultyFormatter (row) {
      console.log(row)

      const diff = +row.difficulty
      let x = ''
      switch (diff) {
        case 1:
          x = '简单'
          break
        case 2:
          x = '一般'
          break
        case 3:
          x = '困难'
          break
      }
      return x
    },
    //
    formatter (row, column, cellValue, index) {
      // row 为当前行的信息 column为当前列的信息  cellValue单元格的信息 index 为索引
      // console.log(row, column, cellValue, index)
      if (cellValue === '1') {
        return '单选'
      } else if (cellValue === '2') {
        return '多选'
      } else {
        return '简答'
      }
    },

    // questionData (row) {
    //   console.log(row)
    //   // const arr = []
    //   // row.questionIDs.forEach((item, index) => {
    //   //   console.log(item)
    //   //   arr.push(item.number)
    //   //   // Object.values(arr)
    //   // })
    //   // Object.values(arr)
    //   // console.log(arr)
    //   // return arr.join('\n')
    //   // console.log(arr.join('\n'))
    // },
    // 这个是试题编码点击弹窗
    async questionsCli (row, item) {
      console.log(row, item)
      this.showPreview = true
      const res = await detail({ id: item.id })
      console.log(res.data.directoryName)
      this.previewRowData = { ...res.data }
      this.reduceTagQuestion = res.data.question.replace(/<[^>]+>/gi, '')
      this.reduceTagAnswer = res.data.answer.replace(/<[^>]+>/gi, '')
    },

    QuesDelete (id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        await removeRandoms(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getQuestionList()
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style scoped>
.pag-fr {
  float: right;
  /* padding-right: 60px; */
  margin: 15px;
}

/* ::v-deep .el-table .cell {
  white-space: pre-line;
} */
.questions {
  cursor: pointer;
  color: #409eff;
}
</style>
